<template>
    <v-layout fill-height>
        <div style="width: 400px; background-color: white;  overflow-y: auto; border: 0 solid #DDD; border-right-width: 1px;">
            <v-treeview
                    :active.sync="active"
                    :items="items"
                    item-key="path"
                    :load-children="fetchSubDir"
                    activatable
                    active-class="primary--text"
                    class="grey lighten-5"
                    open-on-click
                    transition
                    hoverable
            >
                <template v-slot:prepend="{ item, open }">
                    <v-icon v-if="!item.file">
                        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
                    </v-icon>
                    <v-icon v-else>
                        {{ file_icon[item.file] }}
                    </v-icon>
                </template>
            </v-treeview>
        </div>
        <div id="right_content" style="background-color: white; width: 100%; display: flex;">
            <div style="flex: auto; overflow-y: hidden; ">
                <iframe :src="md_src"
                        style="border: 0px solid gray; width: 100%; height: 100%; margin: 0;padding: 0;"></iframe>

            </div>

        </div>
    </v-layout>
</template>

<style>
</style>

<script>

    export default {
        data: () => ({
            n: 0,
            md_src: "",
            active: [],
            cfg_floders: [],
            items: [
                {
                    id: 0,
                    name: "Default",
                    children: []
                }
            ],
            file_icon: {
                html: 'mdi-language-html5',
                js: 'mdi-nodejs',
                json: 'mdi-json',
                md: 'mdi-markdown',
                pdf: 'mdi-file-pdf',
                png: 'mdi-file-image',
                txt: 'mdi-file-document-outline',
                xls: 'mdi-file-excel',
                ppt: 'mdi-file-powerpoint',
                doc: 'mdi-file-document',
                file: 'mdi-file',
                zip: 'mdi-zip-box',
            },
        }),

        computed: {},

        watch: {
            active(v) {
                // console.log("active:", v);
                if (v.length < 1) {
                    this.md_src = "/api/md/Help/index.md";
                } else {
                    var baseUrl = "/api/md/";
                    this.md_src = baseUrl + v;
                }

            }
        },
        mounted() {
            // this.renderMDsrc($("#md_src").text());
            var th = this;
            th.items = [];
            th.axios({
                method: "get",
                url: "/api/info",
                // auth: {
                //     username: "admin",
                //     password: "admin",
                // }
            }).then((response) => {
                th.cfg_floders = response.data.data;
                // console.log(th.cfg);
                var root_items = [];
                th.cfg_floders.forEach(function (v, i) {
                    if (v.Markdown) {
                        th.n += 1;
                        root_items.push({
                            id: th.n,
                            name: v.Name,
                            path: v.Name + "/", // 使用虚拟名称
                            children: [],
                        })
                    }
                });
                // console.log(root_items);
                th.items = root_items;
            })
        },
        methods: {
            async fetchSubDir(item) {
                var th = this;
                var item_children = [];
                // var req = new Promise(function (resolve, reject) {
                return th.axios({
                    method: "get",
                    url: "/api/list/" + item.path,
                    params: {
                        filter: '.md,.markdown',
                        exclude: '',
                    },
                    // auth: {
                    //     username: "admin",
                    //     password: "admin",
                    // }
                }).then((response) => {
                    var fs_list = response.data.data;

                    fs_list.forEach(function (v, i) {
                        th.n += 1;
                        var one = {
                            id: th.n,
                            name: v.Name,
                            path: v.Path + v.Name,
                        };
                        if (v.IsDir) {
                            one.path += "/";
                            one.children = [];
                        } else {
                            var last = one.name.substr(one.name.lastIndexOf(".") + 1).toLowerCase();
                            one.file = "file";
                            if (["png", "jpg", "gif", "svg", "psd"].indexOf(last) !== -1) {
                                one.file = "png";
                            } else if (["zip", "7z", "rar", "tar", "gz", "iso"].indexOf(last) !== -1) {
                                one.file = "zip";
                            } else if (["md", "markdown"].indexOf(last) !== -1) {
                                one.file = "md";
                            } else if (["txt", "log"].indexOf(last) !== -1) {
                                one.file = "txt";
                            } else if (["js", "script", "py", "go", "rs", "bat", "json"].indexOf(last) !== -1) {
                                one.file = "js";
                            } else if (["csv", "xls", "xlsx"].indexOf(last) !== -1) {
                                one.file = "xls";
                            } else if (["doc", "docx"].indexOf(last) !== -1) {
                                one.file = "doc";
                            } else if (["ppt", "pptx"].indexOf(last) !== -1) {
                                one.file = "ppt";
                            }
                        }
                        item_children.push(one);
                    });
                    // console.log(item_children);
                    item.children = item_children;
                });
                //     resolve(item_children);
                // });
                // req.then(function (v) {
                //     item.children = v;
                // });

            },
        }
    }
</script>


